<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <script src="./js/libs/jquery-1.12.3.js"></script>
    <script src="./js/libs/jquery-1.12.4.js"></script>
    <script src="./js/libs/jquery.lazyload.js"></script>
    <script src="./js/libs/lazyload.js"></script>
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/tab.css">
    <link rel="stylesheet" href="./css/goods.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/header.css">
</head>
<script>
    $(function () {
        $("img").lazyload({ effect: "fadeIn" });//lazyload
        (function () {
            //加载头尾
            $(".nav").load("./nav.html")
            $(".header").load("./header.html");
            $(".tab").load("./tab.html")
            $(".footer").load("./footer.html")
        })()
        //延迟加载
        $("img").lazyload({
                effect: "fadeIn",
                placeholder: "./images/timg.gif",
                threshold: 0
            });

        //tab切换
        $(".line3>.btn-list>.btn").click(function () {
            $(this).addClass("current").siblings().removeClass("current")
        })
        $(".line3>.btn-list>.btn").eq(0).click(function () {
            $(".detail").show()
            $(".comment-list").hide()
        })
        $(".line3>.btn-list>.btn").eq(1).click(function () {
            $(".detail").hide()
            $(".comment-list").show()
        })


    })
</script>
<!-- 放大镜 -->
<script>
    $(window).load(function () {
        var $smallImg = $(".middleImg")
        var $smallArea = $(".middleArea")
        var $bigArea = $(".bigArea")
        var $bigImg = $("#bigImg")
        $($smallImg).on("mouseenter", function () {
            $smallArea.show()
            $bigArea.show()
            $($smallImg).on("mousemove", function (evt) {
                //小区域=(小图/大图)*大区域
                $smallArea.css({
                    width: ($smallImg.width() / $bigImg.width() * $bigArea.width()),
                    height: (($smallImg.height() / $bigImg.height()) * $bigArea.height())
                })
                var oScale = $bigArea.width() / $smallArea.width()*1.5
                var mX = evt.pageX - $smallImg.offset().left - $smallArea.width() / 2;
                var mY = evt.pageY - $smallImg.offset().top - $smallArea.height() / 2;
                if (mX <= 0) {
                    mX = 0
                }
                if (mY <= 0) {
                    mY = 0
                }
                if (mX >= $smallImg.width() - $smallArea.width()) {
                    mX = $smallImg.width() - $smallArea.width()
                }
                if (mY >= $smallImg.height() - $smallArea.height()) {
                    mY = $smallImg.height() - $smallArea.height()
                }
                $smallArea.css({
                    left: mX,
                    top: mY
                })
                $bigImg.css({
                    left: -mX * oScale,
                    top: -mY * oScale
                })
            })
        }).on("mouseleave", function () {
            $smallArea.hide()
            $bigArea.hide()
        })
        middleImg = document.querySelector(".pic-zoom")
        var Imgs = document.querySelectorAll(".ul_left>ul>li")
        for (let i = 0; i < Imgs.length; i++) {
            Imgs[i].tmpIndex = (i + 1);
            Imgs[i].onmouseenter = function () {
                middleImg.children[0].setAttribute("src", `images/xq0${this.tmpIndex}.jpg`)
                bigImg.setAttribute("src", `images/xq0${this.tmpIndex}.jpg`)
            }
        }

        //底部切换

        var imgIndex = 0;
        $(".small>.left").click(function () {
            if (imgIndex == 0) {
                return;
            }
            imgIndex--;
            $(".small>.inner>ul").animate({
                left: 90 * -imgIndex
            })
        })
        $(".small>.right").click(function () {
            if (imgIndex == 4) {
                return;
            }
            imgIndex++;
            $(".small>.inner>ul").animate({
                left: 90 * -imgIndex
            })
        })
        $(".small>.inner>ul>li").mouseenter(function(){
            $(this).css("border","1px solid #111").siblings().css("border","none")
        })
        
        $(".small>.inner>ul>li").click(function(){
            console.log($(this).index())
            var index=$(this).index()+1
            $(".middleImg").find("img").attr("src","images/goods"+index+".webp")
            $(".bigImg").attr("src","images/goods"+index+".webp")
        })
      

    })
</script>

<script>
    //right栏切换
    $(function () {
        $(".product-color>span").click(function () {
            $(this).css("borderColor", "#111").siblings().css("borderColor", "#cdcdcd")
        })
        $(".product-size>span").click(function () {
            $(this).css("borderColor", "#111").siblings().css("borderColor", "#cdcdcd")
        })

        //购物车点击增加数量
        let $i=0;
        $(".product-number>.box>button:eq(1)").click(function () {
            $i++;
            $(".product-number>.box>span").text($i)
            
        })
        $(".product-number>.box>button:eq(0)").click(function () {
            $i--;
            if($i<0){
                $i=0
            }
            $(".product-number>.box>span").text($i)
            
        })
    })

</script>

<body>
    <div class="nav" id="nav"></div>
    <div class="header" id="header"></div>
    <div class="tab" id="tab"></div>
    <div class="main">
        <div class="main-Con">
            <div class="line1">
                <span class="box1">
                    <a href="index.html">走秀首页</a>
                    <span>></span>
                </span>
                <span class="box1">
                    <a href="#">女包</a>
                    <span>></span>
                </span>
                <span class="box1">
                    <a href="#">女士链条包30592B4RU 棕色</a>
                    <span>></span>
                </span>
            </div>
            <div class="line2">
                <div class="content">
                    <div class="left">
                        <div id="middleImg" class="middleImg">
                            <img src="images/goods1.webp" />
                            <div id="middleArea" class="middleArea"></div>
                        </div>
                        <div id="small" class="small">
                            <img src="./images/goods_btn2.png" alt="" class="left">
                            <img src="./images/goods_btn1.png" alt="" class="right">
                            <div class="inner">
                                <ul>
                                    <li><img src="images/goods1.webp" /></li>
                                    <li><img src="images/goods2.webp" /></li>
                                    <li><img src="images/goods3.webp" /></li>
                                    <li><img src="images/goods4.webp" /></li>
                                    <li><img src="images/goods5.webp" /></li>
                                </ul>
                            </div>
                        </div>
                        <div id="bigArea" class="bigArea">
                            <img id="bigImg" class="bigImg" src="images/goods1.webp" />
                        </div>
                    </div>

                    <div class="right">
                        <p class="product-name">女士链条包 30592B4RU 棕色</p>
                        <div class="brand-name">
                            <span>品牌：Coach</span>
                            <div>商品编号：774780435180152</div>
                        </div>
                        <div class="product-price">
                            <span class="unit">
                                <span>￥</span>
                                3599
                            </span>
                            <span class="market-price">
                                &nbsp;&nbsp;
                                <span class="price-unit">
                                    ￥
                                </span>4999
                            </span>
                        </div>
                        <div class="product-region">发货地:
                            <span>香港</span>
                            <span>预计7-14个工作日送达</span>
                        </div>
                        <div class="product-tariff">税&nbsp;&nbsp;费:
                            <span>商家承担</span>
                        </div>
                        <ul class="product-color">颜色:
                            <span>棕色</span>
                            <span>棕色</span>
                        </ul>

                        <ul class="product-size">尺码:
                            <span>大码</span>
                            <span>均码</span>
                            <span>小码</span>
                        </ul>
                        <div class="product-number">购买数量:
                            <div class="box">
                                <button>-</button>
                                <span>1</span>
                                <button>+</button>
                            </div>
                        </div>
                        <div class="product-service">
                            <i class="iconfont icon-fuwu"></i>由提供
                            <i class="iconfont icon-lunkuodasan-"></i>由走秀网提供售后服务

                        </div>
                        <div class="button-wrap">
                            <button class="btn1">立即购买</button>
                            <button class="btn2">加入购物车</button>
                        </div>
                        <a href="#" class="phone">电话订购: 400-888-4499
                            <span>(9:00~19:00)</span>
                        </a>
                        <div class="label-list">
                            <div><img src="./images/goods_1.png" alt="">正品保障</div>
                            <div><img src="./images/goods_2.png" alt="">七天退换</div>
                            <div><img src="./images/goods_3.png" alt="">权威质检</div>
                            <div><img src="./images/goods_4.png" alt="">收藏商品</div>
                            <div><img src="./images/goods_5.png" alt="">收藏品牌</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="line3">
                <ul class="btn-list">
                    <li class="btn current">商品详情</li>
                    <li class="btn">商品评价</li>
                </ul>
                <div class="content-list">
                    <ul class="content">
                        <li class="detail">
                            <div class="title">商品参数</div>
                            <ul class="style">
                                <li>箱包皮具风格:休闲</li>
                                <li>开袋方式:翻盖</li>
                            </ul>
                            <div class="tip">
                                <div class="title">消费者购前须知：</div>

                                尊敬的顾客，您在走秀网购买的境外发货商品，等同于您在境外购买，请在购买前仔细阅读全部内容，并对自身风险承担作出客观判断。
                                <br>
                                1. 海外商品无中文简体标签，如需了解中文信息，请联系客服。
                                <br>
                                2. 海外商品适用的关于品质、安全、健康、卫生、环保、标识等标准与我国大陆相关标准可能有所不同，在使用过程中由此可能产生的危害、损失或其他风险，走秀网不承担责任。
                                <br>
                                3. 进口税海关收取，抽税告知：
                                <br>
                                “根据跨境电子商务零售进口税收政策，个人单笔交易限值人民币5000元，个人年度交易限值人民币26000元。在限值以内进口的跨境电子商务零售进口商品，关税税率暂设为0%；进口环节增值税、消费税按法定应纳税额的70%征收。
                                <br>
                                计算规则：税费 = 购买单价 × 件数 × 跨境电商综合税率
                                <br>
                                跨境电商综合税率 =（消费税率 + 增值税率）/（1 - 消费税率）× 70%”
                                <br>
                                4. 海外购买商品仅限个人自用，不得再次销售。
                                <br>
                                5. 海外商家不定期更换包装，走秀网尽力准确展示商品最新包装，如有不符，以收到实物为主。
                                <br>
                                6.
                                所有的商品图片均为专业摄影师拍摄，经后期修制与色彩调整，尽量与实际商品保持一致，但由于灯光、显示器色彩偏差，个人对颜色理解不同等因素，实物与图片出现一定程度色差实属难免，商品颜色请以实际商品为准
                                ，此类问题不属于商品质量问题。
                                <br>
                                7. 在您收到货时有任何问题请第一时间联系客服解决，对支持七天无理由退货且未拆封、未使用、不影响二次销售的商品，可享受7天无理由退换货。
                                <br>
                                8. 确认收货之日7天（含）内，如有质量问题、实物与图文描述不符或缺发，可申请退货。
                            </div>
                            <div class="detail-img">
                                <img data-original="./images/goods-photo1.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo2.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo3.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo4.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo5.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo6.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo7.jpg" src="./images/timg.gif" alt="">
                                <img data-original="./images/goods-photo8.jpg" src="./images/timg.gif" alt="">
                            </div>
                            <div class="tip">
                                <div class="title">发票说明:</div>
                                1. 若您购买的是【国内发货】商品，商家有义务按照买家实际支付现金，开具正规发票，相关税收应按国家相关规定由商家自行承担。
                                <br>
                                2. 若您购买的是【海外直邮】、【海外发货】或【国内保税仓发货】商品，商家均为海外商家，暂时无法按照国内法律规定提供购物发票。
                            </div>
                            <div class="tip">
                                <div class="title">价格说明:</div>
                                走秀价：指商家在走秀网开放平台销售商品时的售价。
                                <br>
                                限时抢购价、特卖价：指商家在促销活动中的售价。
                                <br>
                                划线价：商品的参考价,并非原价,该价格可能是品牌专柜价、商品吊牌价或由品牌供应商提供的零售价或商品在走秀网平台曾经展示的走秀价。
                            </div>
                        </li>
                        <li class="comment-list">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer" id="footer"></div>
</body>

</html>